<template>
  <div
    id="app"
  >
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
  },
  data() {
    return {
    };
  },
  mounted() {
    // Initialize theme from localStorage
    this.$store.dispatch('theme/initTheme');
  },
  destroyed() {
  },

  watch: {
  },
  methods: {
  },
};
</script>

<style lang="scss">
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 720px;
  min-width: 1280px;
}

#app {
  height: 100%;
  min-height: 720px;
  min-width: 1280px;
}

// Override Element UI styles
.el-input__inner {
  height: 40px;
  line-height: 40px;
  background: #F5F5F5;
  border: none;
  border-radius: 8px;

  &:focus {
    background: #FFFFFF;
    border: 1px solid #7453DA;
  }
}
.el-textarea__inner {
  height: 100% !important;
}

.f-r {
  display: flex;
  flex-direction: row;
}
.f-c {
  display: flex;
  flex-direction: column;
}
.f-s {
  flex-shrink: 0;
}
.f-g {
  flex-grow: 1;
}
.a-c {
  align-items: center;
}
.j-c {
  justify-content: center;
}
.j-b {
  justify-content: space-between;
}
.f-e {
  justify-content: flex-end;
}
.f-w {
  flex-wrap: wrap;
}

.sidebar .menu .history-list .history-item.active .item-left i,
.sidebar .menu .history-list .history-item.active .item-left span,
.sidebar .menu .history-list .history-item:hover .item-left i,
.sidebar .menu .history-list .history-item:hover .item-left span{
  color: #ffffff !important;
}

/* Dark mode styles */
html.dark-mode {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }

  .app-container {
    background: #0F0E11;
  }

  .main-container,
  .sidebar,
  .search-bar,
  .el-card,
  .el-dialog {
    background-color: #1E1C21 !important;
    color: #f0f0f0;
    border-color: #302e34 !important;
  }

  .el-table {
    background-color: #1E1C21;
    color: #f0f0f0;

    th, td {
      background-color: #1E1C21 !important;
      border-bottom-color: #302e34 !important;
    }

    tr:hover > td {
      background-color: #302e34 !important;
    }

    .el-table__header th {
      background-color: #2a2a2a !important;
      color: #f0f0f0;
    }
  }

  .el-input__inner,
  .el-textarea__inner {
    background-color: #302e34 !important;
    border-color: #302e34 !important;
    color: #f0f0f0 !important;
  }

  .el-button {
    &.el-button--default {
      background-color: #302e34;
      border-color: #302e34;
      color: #f0f0f0;
    }
  }

  .el-pagination {
    color: #f0f0f0;

    .btn-prev, .btn-next, .el-pager li {
      background-color: #302e34 !important;
      color: #f0f0f0 !important;
    }

    .el-pager li.active {
      color: #7E4CE0 !important;
    }
  }

  /* Custom scrollbar in dark mode */
  ::-webkit-scrollbar-track {
    background: #302e34;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(126, 76, 224, 0.5);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 76, 224, 0.7);
  }
}


.dark-mode {
  .divider {
    background-color: rgba(255,255,255,0.3) !important;
  }
  .el-table__fixed::before, .el-table__fixed-right::before,
  .el-table::before, .el-table--group::after, .el-table--border::after {
    background-color: transparent;
  }
  .chat-content-wrapper .content .friend-message {
    background: #302e34;
    margin-top: 12px;
    color: #ffffff;
  }
  .chat-content-wrapper .content-box .subtitle {
    color: #ffffff;
  }
  .chat-content-wrapper .right-box .static {
    background-color: #666666;
    color: #ffffff;
  }
  .chat-content-wrapper .footer .input-box {
    padding-left: 18px;
  }
  .settings-page h1,
  .admin-page h1, {
    color: #ffffff !important;
  }
  .settings-page,
  .admin-page,
  .admin-content{
    background: #302e34 !important;
  }
  .settings-content {
    background-color: #1E1C21 !important;
  }
  .settings-page .settings-menu .menu-item span {
    color: #ffffff !important;
  }
  .history .history-list .history-item {
    background-color: #302e34;
  }
  .history-title {
    color: #ffffff !important;
  }
  .models-section .model-card {
    background-color: #302e34;
  }
  .history .history-list .history-item {
    border-color: #302e34;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .sidebar .sidebar-footer .user-info {
    box-shadow: none;
    border: 1px solid #302e34;
    background-color: #232127;
  }
  .sidebar .sidebar-footer .user-info .user-profile .user-details .username {
    color: #ffffff;
  }
  .history .history-list .history-item:hover {
    background-color: #7E4CE0;
  }
  .history .history-list .history-item .history-item-info .history-item-name,
  .model-info h3 {
    color: #ffffff !important;
  }
  .history .history-list .history-item .message-icon {
    display: none;
  }
  .model-info p {
    color: #ffffff !important;
    opacity: 0.6;
  }
  .model-icon {
    background-color: #302e34;
  }
  .input-box {
    background-color: #302e34 !important;
    box-shadow:none !important;
    border: none !important;
  }
}
</style>
